import axios from "axios";
import React, { useEffect, useState } from "react";
import "./style.scss";
import { NavLink, useNavigate } from "react-router-dom";

const Home = () => {
  const [data, setData] = useState([]);
  const navigate = useNavigate();
  const _getData = async () => {
    const resp = await axios.get("/api/list");
    console.log(resp.data.data);
    setData(resp.data.data);
  };
  useEffect(() => {
    _getData();
  }, []);
  return (
    <div>
      {data.map((v) => {
        return (
          // <NavLink to={{ pathname: "/detail" }} key={v.id}>
          <dl
            className="list-item"
            key={v.id}
            onClick={() => navigate("/detail", { state: v })}
          >
            <dt>
              <img src={v.image} alt="" />
            </dt>
            <dd>
              <h3>{v.title}</h3>
              <p>{v.desc}</p>
              <div className="price">{v.price}</div>
            </dd>
          </dl>
          // </NavLink>
        );
      })}
    </div>
  );
};

export default Home;
